<!--
 * @Description: 绑定学号及学院
 * @Author: 晋龍
 * @Date: 2023-01-10 21:26:58
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-18 22:01:03
-->
<template>
  <div class="bindView">
    <!-- logo -->
    <div class="logoBox">
      <var-image class="login_logo" src="./image/logo.png" />
    </div>
    <!-- 绑定 -->
    <div class="textBox">
      <div class="bindText">绑定</div>
      <!-- 表单 -->
      <var-form ref="form" :disabled="disabled" :readonly="readonly" class="bindForm">
        <var-space direction="column" :size="[14, 0]">
          <!-- 学号 -->
          <div class="stuNumForm">
            <div class="stuNumIcon">
              <var-icon
                name="card-account-details-outline"
                color="rgb(38,89,247)"
                size="25px"
              />
            </div>
            <div class="stuNum">
              <var-input
                placeholder="请输入学号"
                :rules="[
                  (v) => !!v || '学号不能为空',
                  (v) => v.length === 11 || '学号输入错误',
                ]"
                v-model="formData.studentNumber"
              />
            </div>
          </div>

          <!-- 学院 -->
          <div class="collegeForm">
            <div class="collegeIcon">
              <var-icon name="format-list-checkbox" color="rgb(38,89,247)" size="25px" />
            </div>
            <div class="collegeName">
              <var-select
                placeholder="请选择学院"
                :rules="[(v) => !!v || '必须选一个学院']"
                v-model="formData.collegeId"
              >
                <var-option v-for="item in college" :label="item.collegeName" :value="item.id"/>
              </var-select>
            </div>
          </div>

          <!-- 绑定按钮 -->
          <div class="bindBtn">
            <var-button type="primary" class="btn" @click="btnClick()">绑定</var-button>
          </div>

          <var-popup v-model:show="center">
            <div class="popup-example-block">
              <div class="textBox">
                <p class="popupText">请仔细检查<br />信息一旦最后确认将不能再更改</p>
                <p class="text">学号：{{ formData.studentNumber }}</p>
                <p class="text">学院：{{ formData.collegeName }}</p>
              </div>

              <var-button class="popupBtn" @click="center = false">取消</var-button>

              <var-button type="primary" class="popupBindBtn" @click="bindClick()"
                >确认</var-button
              >
            </div>
          </var-popup>
        </var-space>
      </var-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Snackbar } from "@varlet/ui";
import { toRaw } from '@vue/reactivity';
import router from "@/router";
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../stores/user';
import { getUser } from '../../services/user';
const userStore = useUserStore()

// 解构action
const { getAllCollege,addThisCollege,getuser,getId } = userStore

// 解构state
const { college,gid,user } = storeToRefs(userStore)
// 表单定义
const form = ref(null);
const disabled = ref(false);
const readonly = ref(false);
const center = ref(false);

const formData = reactive({
  studentNumber: "",
  collegeName: "",
  collegeId:"",
});
// 获取学院数据
getAllCollege();
// 获取用户信息
getuser()
// 绑定判断
const btnClick = async() => {
  if (formData.studentNumber === "" && formData.collegeId === "") {
    setTimeout(() => {
      Snackbar.warning("请输入学号与学院");
    });
  } else {
    if (formData.studentNumber === "") {
      setTimeout(() => {
        Snackbar.warning("请输入学号");
      });
    } else if (formData.collegeId === "") {
      setTimeout(() => {
        Snackbar.warning("请输入学院");
      });
    } else {
      center.value = true;
      await getId(formData.collegeId);
      formData.collegeName = toRaw(gid.value).collegeName
    }
  }
};

// 确认绑定
const bindClick = async() => {
  let collegeId = formData.collegeId;
  let userNumber = formData.studentNumber;
  const Data = user.value;
  addThisCollege(userNumber,collegeId).then((item)=>{
    setTimeout(() => {
        Snackbar.success("绑定成功");
         // 0是教师
         if (Data.userType === 0) {
            router.push("/teachHome")
          } else {
            router.push("/home");
          }
      });
  }).catch((err)=>{
    setTimeout(() => {
        Snackbar.error("绑定失败");
      });
  })
};



</script>

<style scoped lang="less">
.bindView {
  .logoBox {
    position: relative;
    padding-top: 30%;
    width: 75%;
    padding-left: 12%;
    .logo {
      width: 100%;
    }
  }
  .textBox {
    .bindText {
      padding-top: 20%;
      font-size: 24px;
      font-weight: bolder;
      margin-left: 10%;
    }
    .bindForm {
      margin: 10% 10% 0 10%;
      .stuNumForm {
        .stuNumIcon {
          position: absolute;
          margin-top: 20px;
          display: inline-block;
        }
        .stuNum {
          margin-left: 45px;
          display: inline-block;
          width: 70%;
        }
      }
      .collegeForm {
        .collegeIcon {
          position: absolute;
          margin-top: 20px;
          display: inline-block;
        }
        .collegeName {
          margin-left: 45px;
          display: inline-block;
          width: 70%;
        }
      }
      .bindBtn {
        margin-top: 60px;

        .btn {
          --button-border-radius: 25px;
          --button-normal-height: 45px;
          --button-normal-padding: 0 130px;
          --button-primary-color: rgb(38, 89, 247);
        }
      }
      .popup-example-block {
        width: 300px;
        height: 300px;
        .textBox {
          padding-top: 20px;
          padding-bottom: 30px;
          .popupText {
            text-align: center;
            font-size: larger;
            font-weight: bolder;
            padding-bottom: 20px;
          }
          .text {
            margin-left: 60px;
            font-size: medium;
            color: rgb(87, 87, 87);
          }
        }

        .popupBtn {
          --button-border-radius: 10px;
          --button-normal-height: 45px;
          --button-normal-padding: 0 50px;
          margin-left: 10px;
          margin-right: 20px;
        }
        .popupBindBtn {
          --button-border-radius: 10px;
          --button-normal-height: 45px;
          --button-normal-padding: 0 50px;
          --button-primary-color: rgb(38, 89, 247);
        }
      }
    }
  }
}
</style>
